<template>
  <div class="SalesFirstConsultationReport">
    <a-form :form="form" layout="inline">
      <a-form-item label="数据维度">
        <a-radio-group v-model="query.dataLatitude">
          <a-radio :value="1"> 个人 </a-radio>
          <a-radio :value="2"> 企业 </a-radio>
        </a-radio-group>
      </a-form-item>
      <br>
      <a-form-item label="所属部门">
        <a-input class="queryWidth" placeholder="input placeholder" />
      </a-form-item>
      <a-form-item label="客户经理">
        <a-select
          v-model="query.customerManager"
          class="queryWidth"
          allow-clear
          mode="multiple"
          placeholder="请选择"
        >
          <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
            {{ (i + 9).toString(36) + i }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="销售等级">
        <a-select
          v-model="query.salesRegistration"
          class="queryWidth"
          allow-clear
          mode="multiple"
          placeholder="请选择"
        >
          <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
            {{ (i + 9).toString(36) + i }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="线索来源">
        <a-select
          v-model="query.sourceOfClues"
          class="queryWidth"
          allow-clear
          mode="multiple"
          placeholder="请选择"
        >
          <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
            {{ (i + 9).toString(36) + i }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="广告商">
        <a-select v-model="query.advertiser" class="queryWidth" allow-clear placeholder="请选择广告商">
          <a-select-option value="jack">
            Jack
          </a-select-option>
          <a-select-option value="lucy">
            Lucy
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="expand" label="推广账户">
        <a-select v-model="query.promotionAccount" class="queryWidth" allow-clear placeholder="请选择推广账户">
          <a-select-option value="jack">
            Jack
          </a-select-option>
          <a-select-option value="lucy">
            Lucy
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="expand" label="项目">
        <a-select v-model="query.objects" class="queryWidth" allow-clear placeholder="请选择项目">
          <a-select-option value="jack">
            Jack
          </a-select-option>
          <a-select-option value="lucy">
            Lucy
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="expand" label="设备">
        <a-select v-model="query.equipment" class="queryWidth" allow-clear placeholder="请选择设备">
          <a-select-option value="jack">
            Jack
          </a-select-option>
          <a-select-option value="lucy">
            Lucy
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="expand" label="推广经理">
        <a-select v-model="query.promotionManager" class="queryWidth" allow-clear placeholder="请选择推广经理">
          <a-select-option value="jack">
            Jack
          </a-select-option>
          <a-select-option value="lucy">
            Lucy
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="expand" label="省">
        <a-select v-model="query.province" class="queryWidth" allow-clear placeholder="请选择省">
          <a-select-option value="jack">
            Jack
          </a-select-option>
          <a-select-option value="lucy">
            Lucy
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="expand" label="市">
        <a-select v-model="query.city" class="queryWidth" allow-clear placeholder="请选择市">
          <a-select-option value="jack">
            Jack
          </a-select-option>
          <a-select-option value="lucy">
            Lucy
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="expand" label="日期">
        <public-picker-date />
      </a-form-item>

      <a-row style="padding:10px 30px;">
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
            <span v-if="expand">收起</span><span v-else>展开</span> <a-icon :type="expand ? 'up' : 'down'" />
          </a>
          <a-button @click="queryForm">查询</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset"> 重置 </a-button>
          <!-- <public-table-setting style="display:inline-block;margin:0 10px" :table-thead-copy="columnsCopy" :table-thead.sync="columns" :table-scroll.sync="scroll" /> -->
          <public-table-settings style="display:inline-block;margin:0 10px" :table-thead-copy="columnsCopy" :table-thead.sync="columns" :table-scroll.sync="scroll" />
        </a-col>
      </a-row>
    </a-form>
    <div class="anclear">
      
    </div>
    <div>
      <a-table :columns="columns" :data-source="data" :scroll="scroll" />
    </div>
  </div>

</template>

<script>
import {deepCopy} from '@/utils/util.js'
export default {
  name: 'SalesFirstConsultationReport',
  data () {
    return {
      scroll: {x: 5000,y: 400},
      expand: false,
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      query: {
        dataLatitude: 1,
        //客户经理
        customerManager: [],
        //销售等级
        salesRegistration: [],
        //线索来源
        sourceOfClues: [],
        //推广属性-广告商
        advertiser: undefined,
        //推广属性-推广账户
        promotionAccount: undefined,
        //推广属性-项目
        objects: undefined,
        //推广属性-设备
        equipment: undefined,
        //推广属性-推广经理
        promotionManager: undefined,
        province: undefined,
        city: undefined
      },
      data: [],
      columns: [
        { title: '所属部门', width: 100, dataIndex: 'name', key: '1', fixed: 'left' ,awaysShow: true},
        { title: '客户经理', width: 100, dataIndex: '12', key: '2', fixed: 'left' },
        { title: '销售等级', dataIndex: 'address', key: '3', width: 150 },
        { title: '总首咨数', dataIndex: 'address', key: '4', width: 150 },
        { title: '跟进人数', dataIndex: 'address', key: '5', width: 150 },
        { title: '未跟进人数', dataIndex: 'address', key: '6', width: 150 },
        { title: '已反馈数', dataIndex: 'address', key: '7', width: 150 },
        { title: '未反馈数', dataIndex: 'address', key: '8', width: 150 },
        { title: '反馈率', dataIndex: 'address', key: '9', width: 150 },
        { title: '反馈无效数', dataIndex: 'address', key: '10' },
        { title: '反馈有效数', dataIndex: 'address', key: '11' },
        { title: '反馈有效率', dataIndex: 'address', key: '12' },
        { title: '拨打人数', dataIndex: 'address', key: '13' },
        { title: '拨打次数', dataIndex: 'address', key: '14' },
        { title: '拨打频次', dataIndex: 'address', key: '15' },
        { title: '拨打率', dataIndex: 'address', key: '16' },
        { title: '接通人数', dataIndex: 'address', key: '17' },
        { title: '接通次数', dataIndex: 'address', key: '18' },
        { title: '接通率', dataIndex: 'address', key: '19' },
        { title: '有效通话人数', dataIndex: 'address', key: '20' },
        { title: '有效通话次数', dataIndex: 'address', key: '21' },
        { title: '有效接通率', dataIndex: 'address', key: '22' },
        { title: '总通话时长(s)', dataIndex: 'address', key: '23' },
        { title: '平均通话时长(s)', dataIndex: 'address', key: '24' },
        { title: '有效通话时长(s)', dataIndex: 'address', key: '25' },
        { title: '平均单通有效时长(s)', dataIndex: 'address', key: '26' },
        { title: '当日回访人数', dataIndex: 'address', key: '27' },
        { title: '当日回访人数比', dataIndex: 'address', key: '28' },
        { title: '当日回访次数', dataIndex: 'address', key: '29' },
        { title: '当日回访次数比', dataIndex: 'address', key: '30' },
        { title: '当日成交人数', dataIndex: 'address', key: '31' },
        { title: '当日转化率', dataIndex: 'address', key: '32' },
        { title: '0-5分钟内接通', dataIndex: 'address', key: '33' },
        { title: '5-15分钟内接通', dataIndex: 'address', key: '34' },
        { title: '15-30分接通', dataIndex: 'address', key: '35' },
        { title: '30-60分接通', dataIndex: 'address', key: '36' },
        { title: '60-180分接通', dataIndex: 'address', key: '37' },
        { title: '180分外接通', dataIndex: 'address', key: '38' },
        { title: '0-15分钟内拨打', dataIndex: 'address', key: '39' },
        { title: '15-30分钟内拨打', dataIndex: 'address', key: '40' },
        { title: '30-60分钟内拨打', dataIndex: 'address', key: '41' },
        { title: '60-180分钟内拨打', dataIndex: 'address', key: '42' },
        { title: '180分钟外拨打', dataIndex: 'address', key: '43' }
      ],
      columnsCopy: []
    }
  },
  watch: {
    columns: {
      handler(newVal){
        console.log(newVal)
      },
      deep: true
    }
  },
  created(){
    this.queryInit()
    for (let i = 0; i < 100; i++) {
      this.data.push({
        key: i,
        name: `Edrward ${i}`,
        age: i,
        address: `London Park no. ${i}`
      })
    }
    console.log(this.data)
    this.columnsCopy = deepCopy(this.columns)
    this.scroll = {x: this.columns.length * 150,y: 400}
  },
  methods: {
    //重置查询条件
    queryInit(){
      this.query = {
        dataLatitude: 1,
        //客户经理
        customerManager: [],
        //销售等级
        salesRegistration: [],
        //线索来源
        sourceOfClues: [],
        //推广属性-广告商
        advertiser: undefined,
        //推广属性-推广账户
        promotionAccount: undefined,
        //推广属性-项目
        objects: undefined,
        //推广属性-设备
        equipment: undefined,
        //推广属性-推广经理
        promotionManager: undefined,
        province: undefined,
        city: undefined
      }
    },
    //重置查询条件
    handleReset(){
      this.queryInit()
      //发送ajax
    },
    //展开收起
    toggle() {
      this.expand = !this.expand
    },
    //点击查询
    queryForm(){
      console.log(this.query)
    },
    //获取tableAjax
    getTableInfo(){

    }
  }
}
</script>
<style lang="scss" scoped>
  .SalesFirstConsultationReport{
    padding:20px;
    .queryWidth {
      width:250px;
    }
  }
</style>
<style lang="scss">
  .SalesFirstConsultationReport{
    .ant-form-item-label{
      width:90px;
    }
  }
</style>
